<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <el-card>
      <el-tabs>
        <el-tab-pane
          label="基本信息"
          class="el-tabs__items"
        >
          <!-- 输入框 -->
          <!-- <el-form
            label-width="90px"
            :label-position="labelPosition"
            style="height:400px;margin-top:30px"
          >
            <el-row style="margin-left: 30px">
              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">员工编号:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">司机名称:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">所属机构:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="margin-left: 30px">
              <el-col :span="8">
                <el-form-item label="left">
                  <template slot="label">
                    <span class="label">电话:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">年龄:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form> -->
          <!-- 按钮 -->
          <!-- <div class="elButton">
            <el-button
              type="warning"
            >编辑</el-button>
          </div> -->
          <driverInfo></driverInfo>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息">
          <!-- 输入框 -->
          <!-- <el-form
            label-width="115px"
            :label-position="labelPosition"
            style="height:400px;margin-top:30px"
          >
            <el-row style="margin-left: 30px">
              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">驾驶证号:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">准驾车型:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">初次领证日期:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="margin-left: 30px">
              <el-col :span="8">
                <el-form-item label="left">
                  <template slot="label">
                    <span class="label">驾驶证有效期限:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">驾龄:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">驾驶证类型:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="margin-left: 30px">
              <el-col :span="8">
                <el-form-item label="left">
                  <template slot="label">
                    <span class="label">从业资格证:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item>
                  <template slot="label">
                    <span class="label">入场证信息:</span>
                  </template>
                  <el-input style="width: 250px"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <span>图片信息</span>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </el-form> -->
          <!-- 按钮 -->
          <!-- <div class="elButton">
            <el-button
              type="warning"
            >编辑</el-button>
          </div> -->
          <driverLicense></driverLicense>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import driverInfo from '@/views/transit/components/driver-info.vue'
import driverLicense from '@/views/transit/components/driver-license.vue'
import { driverDetailUpdate, driverDetail } from '@/api/transit'
export default {
  components: {
    driverInfo,
    driverLicense
  },
  data() {
    return {
      id: null
    }
  },
  created() {
    this.driverDetailUpdates()
  },
  methods: {
    async driverDetailUpdates() {
      // 获取父组件的值
      this.id = this.$route.query.id
      // 获取司机驾驶证信息
      await driverDetailUpdate({
        id: this.id
      })
    },
    // 获取司机详情
    async driverDetails() {
      await driverDetail(this.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
.el-card {
  overflow: initial;
  width: 1280px;
  margin-top: 20px;
  margin-left: 22px;
  border-radius: 5px;
  // padding-right: 30px;
  // padding-bottom: -100px;
  box-shadow: none;
}
/deep/ .el-tabs__active-bar {
  background-color: red;
  height: 3px;
}

/deep/ .el-tabs__item {
  line-height: 25px;
}
/deep/ .el-tabs__nav-scroll {
  margin-left: 30px;
}
/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
/deep/ .el-tabs__item:hover {
  color: #000;
}
/deep/ .el-tabs__item.is-active {
  font-weight: 700;
  color: #000;
  font-size: 16px;
}
.label {
  font-weight: 400;
}
.elButton {
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: 1px solid #e4e7ed;
}
.el-button {
  margin-top: 30px;
}
</style>

<style lang="scss" scoped>
.driver-detail {
  /deep/ .el-container {
    flex-direction: column;
    margin-left: 0px;
  }
  .in {
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7ec;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;
        }
      }
      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232a;
        &:after {
          content: '';
          display: block;
          background-color: #e15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
